<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>链上善行</title>
    <script type="text/javascript" src="common/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="common/css/bootstrap.css" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="front/js/index.js"></script>
    <style>
        .itema{
            margin-top: 10px;
            font-weight: bold;

        }
        .notification-btn {
            border: none;
            background-color: transparent;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 999;
            padding: 10px 20px;
            border-radius: 5px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease-in-out;
        }

        .notification.show {
            opacity: 1;
            transform: translateY(0);;
        }

        .notification.success {
            background-color: #e1f3d8;
            color: #4caf50;
        }

        .notification.warning {
            background-color: #fffbe6;
            color: #ffca28;
        }

        .notification.info {
            background-color: #e6f7ff;
            color: #2196f3;
        }

        .notification.error {
            background-color: #ffebee;
            color: #f44336;
        }
    </style>
</head>
<body>
<header id="header" style="background:linear-gradient(45grad, #ffffff 5%,#e6f4ff 120%);">
    <div class="top-bar" style="background:linear-gradient(45grad, #ffffff 5%,#e6f4ff 120%);">
        <div class="container">
            <div class="top-bar-inner">
                <div class="top-element" >

                        <a href="index" style="position: absolute; top: 0; left: 0px;">
                            <img src="front/images/lssx.png" alt="Oelfare">
                        </a>

                    <div class="top-right-elements">
                        <div class="element">
                            <ul class="top-social" th:if="${session.loginUser == null}" style="position: absolute; right: 50px;">
                                <li class="twitter"><a th:onclick="login_bt()" href="login-page" style="color: #509af8">登录</a></li>
                                <li class="instagram"><a href="register-page">注册</a></li>
                            </ul>
                            <ul class="top-social" style="position: absolute; right: 50px;">
                                <li class="twitter"  th:if="${session.loginUser != null}"><a href="dashboard">进入后台</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="nav-bar" style="background:linear-gradient(45grad, #ffffff 5%,#e6f4ff 120%);">
        <div class="container">
            <div class="navigation">
                <div class="element schedule">
                </div>
                <nav id="flexmenu">
                    <div class="nav-inner">
                        <div id="mobile-toggle" class="mobile-btn"></div>
                        <ul id="menu-main-menu" class="main-menu">
                            <li th:class="${currUri=='index'?'menu-item current-menu-item active':'menu-item'}">
                                <a href="index">主页</a>
                            </li>
                            <li th:class="${currUri=='projects'?'menu-item current-menu-item active':'menu-item'}">
                                <a href="projects">公益项目</a>
                            </li>
                            <li th:class="${currUri=='activities'?'menu-item current-menu-item active':'menu-item'}">
                                <a href="activities">平台活动</a>
                            </li>
                            <li th:class="${currUri=='articles'?'menu-item current-menu-item active':'menu-item'}">
                                <a href="articles">爱心广场</a>
                            </li>
                            <li th:class="${currUri=='board'?'menu-item current-menu-item active':'menu-item'}">
                                <a href="board">留言板</a>
                            </li>
                            <li class="menu-item menu-item-has-children"><span class="submenu-button"></span><a href="#">更多</a>
                                <ul class="sub-menu">
                                    <li class="nav-item">
                                        <a href="#" data-toggle="modal" data-target="#surveyModal">
                                            满意度调查<div style="float: right" class="badge badge-danger">推荐</div>
                                        </a>
                                    </li>
                                    <li th:if="${link.type == 1}" th:each="link:${links}" class="menu-item">
                                        <a th:href="@{${link.targetUrl}}">[[${link.name}]] <div style="float: right" class="badge badge-danger">推荐</div></a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
                <div class="element phone">
                </div>
            </div>
        </div>
    </div>
    <line></line>
    <!-- 满意度调查表格模态框 -->
    <div class="modal fade" id="surveyModal" tabindex="-1" role="dialog" aria-labelledby="surveyModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="surveyModalLabel">满意度调查表格</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="surveyName">姓名</label>
                            <input type="text" class="form-control" id="surveyName" placeholder="请输入您的姓名">
                        </div>
                        <div class="form-group">
                            <label for="surveyEmail">邮箱</label>
                            <input type="email" class="form-control" id="surveyEmail" placeholder="请输入您的邮箱">
                        </div>
                        <div class="form-group">
                            <label for="surveyRating">满意度评分</label>
                            <select class="form-control" id="surveyRating" name="rate">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="surveyFeedback">反馈意见</label>
                            <textarea class="form-control" id="surveyFeedback" rows="3" placeholder="请输入您的反馈意见"></textarea>
                        </div>
                        <div id="notifications1"></div>
                    </form>
                    <button class="notification-btn success" onclick="openSuccess()" style="display: none" id="opt_success">成功</button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" th:onclick="ToSatisFac()">提交</button>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 底部 -->
<footer id="footer" class="footer wow fadeInUp">
    <div class="footer-above">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    <div class="footer_widget">
                        <div class="widget-title">
                            <h4>友情链接</h4>
                        </div>
                        <div class="footer_nav">
                            <ul>
                                <li th:if="${link.type == 2}" th:each="link:${links}" class="menu-item">
                                    <a th:href="@{${link.targetUrl}}" th:text="${link.name}"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="footer_widget">
                        <div class="widget-title">
                            <h4>便捷通道</h4>
                        </div>
                        <div class="footer_nav">
                            <ul>
                                <li class="menu-item"><a href="articles"><i class="ion-md-arrow-forward"></i> 求助广场</a></li>
                                <li class="menu-item"><a href="projects"><i class="ion-md-arrow-forward"></i> 公益项目</a></li>
                                <li class="menu-item"><a href="activities"><i class="ion-md-arrow-forward"></i> 平台活动</a></li>
                                <li class="menu-item"><a href="board"><i class="ion-md-arrow-forward"></i> 留言板</a></li>
                                <li class="menu-item"><a href="login-page"><i class="ion-md-arrow-forward"></i> 登陆</a></li>
                                <li class="menu-item"><a href="register-page"><i class="ion-md-arrow-forward"></i> 注册</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="footer_widget">
                        <div class="widget-title">
                            <h4>联系我们</h4>
                        </div>
                        <div class="address_content">
                            <ul>
                                <li><img src="front/images/phone2.png" alt="icon"><span>电话</span>15342661007</li>
                                <li><img src="front/images/mail.png" alt="icon"><span>邮箱</span> 3070735368@qq.com</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="footer_widget">
                        <div class="widget-title">
                            <h4>我要反馈</h4>
                        </div>
                        <div class="address_content">
                            这里是链上善行公益平台，在这里你可以寻求帮助，也可以帮助他人。如果你有任何意见，欢迎点击
                            <a href="feedback" style="color: #CC3333">此链接</a> 进行反馈！
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- 在</body>标签之前 -->
</body>
</html>